<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="styles/jquery.mobile-1.1.0.min.css" />
        <link rel="stylesheet" href="styles/iDeal.css" />
        <script src="js/jquery.js">
        </script>
        <script src="js/cordova-1.6.1.js">
        </script>
        <script src="js/jquery.mobile-1.1.0.js">
        </script>
        <script src="js/services/CouponServices.js">
        </script>
    </head>
    <body onload="onBodyLoad()">
        <div data-role="page" id="loginPage">
            <div data-role="content" id="loginContent" align="center">
            	<table>
            		<tr>
            			<td align="center">
            				<div data-role="fieldcontain">
                    			<img src="images/icon.png" alt="image" />
                			</div>
            			</td>
            		</tr>
            		<tr>
            			<td>
            				<input id="txtLoginName" placeholder="Login Name" value="" type="text" />
            			</td>
            		</tr>
            		<tr>
            			<td>
            				<input id="txtPassword" placeholder="Password" value="" type="password" />
            			</td>
            		</tr>
            		<tr>
            			<td align="left">
            				<div data-role="fieldcontain">
                    			<fieldset data-role="controlgroup" data-type="vertical">
                        			<input name="ckRemember" id="ckRemember" type="checkbox" data-role="none" />
                        			<label for="ckRemember" style="color: white;">
                            			Remember me
                        			</label>
                    			</fieldset>
                			</div>
            			</td>
            		</tr>
            		<tr>
            			<td align="center">
            				<input type="button" data-inline="true" id="btnLogin" value="LOGIN" />
            			</td>
            		</tr>
            	</table>
            </div>
        </div>
        <script>
        	function onBodyLoad(){
        		document.addEventListener("deviceready",onDeviceReady,false);
        	}
        	
        	function onDeviceReady(){
        		var savedLoginName = window.localStorage.getItem("savedLoginName");
        		var savedPassword = window.localStorage.getItem("savedPassword");
        		if(savedLoginName != null && savedPassword != null){
        			$("#ckRemember").attr("checked",true);
        			$("#txtLoginName").val(savedLoginName);
        			$("#txtPassword").val(savedPassword);
        		} else{
        			$("#ckRemember").attr("checked",false);
        		}
        	}
        	
        	$(document).bind("pageinit", function(){
        		
        		$("#btnLogin").click(function(event){
        			/* Disable all input elements*/
        			$("#loginPage :input").attr("disabled", true);
        			
        			$.mobile.showPageLoadingMsg("b","Getting information ...",true);
        			var loginName = $("#txtLoginName").val();
        			var password = $("#txtPassword").val();
        			window.plugins.couponServices.authenticate(loginName,password,authenticateSuccess,authenticateError);
        		});
        		
        		function authenticateSuccess(response){
        			try{
        				var account = $.parseJSON(response);
        				if(account == null || (account != null && (account.UserUID == null || account.UserUID.length == 0))){
        					$.mobile.hidePageLoadingMsg();
        					alert('Cannot get your information.');
        				} else{
        					window.sessionStorage.setItem("packageUID",account.packageUID);
        					var isRemember = $("#ckRemember").is(":checked");
        					if(isRemember == true){
        						window.localStorage.setItem("savedLoginName", $("#txtLoginName").val());
            					window.localStorage.setItem("savedPassword", $("#txtPassword").val());	
        					} else{
        						window.localStorage.removeItem("savedLoginName");
        						window.localStorage.removeItem("savedPassword");
        					}
        					window.open("main.html");
        				}
        			} catch(error){
        				$.mobile.hidePageLoadingMsg();
        				console.log("Chet khi success");
        				alert(error);
        			}
        			$("#loginPage :input").attr("disabled", false);
        		}
        		
        		function authenticateError(error){
        			$.mobile.hidePageLoadingMsg();
        			console.log("Chet khi error");
        			alert(error);
        			$("#loginPage :input").attr("disabled", false);
        		}
        	});
        </script>
    </body>
</html>